import { useSelector } from 'react-redux'
import TodoItem from './TodoItem'

const TodoMain = () => {
  const list = useSelector((state) => state.todos)
  const type = useSelector((state) => state.type)
  let todoList = []
  if (type === 'all') {
    todoList = list
  } else if (type === 'active') {
    todoList = list.filter((item) => item.done === false)
  } else {
    todoList = list.filter((item) => item.done === true)
  }
  return (
    <section className="main">
      <input id="toggle-all" className="toggle-all" type="checkbox" />
      <label htmlFor="toggle-all">Mark all as complete</label>
      <ul className="todo-list">
        {todoList.map((item) => (
          <TodoItem item={item} key={item.id}></TodoItem>
        ))}
        {/*  */}
      </ul>
    </section>
  )
}

export default TodoMain
